<template>
    <div class="p-4">
      <!-- 班级选择按钮组 -->
      <el-card class="mb-4" :body-style="{ backgroundColor: 'rgb(245, 245, 245)' }">
        <div class="flex space-x-2">
          <el-button
            v-for="classItem in classes"
            :key="classItem"
            :type="selectedClass === classItem ? 'primary' : 'default'"
            @click="selectClass(classItem)"
          >
            {{ classItem }}
          </el-button>
        </div>
      </el-card>
  
      <!-- 搜索框 -->
      <div class="mb-4 flex space-x-2">
        <el-input
          v-model="searchQuery"
          placeholder="输入准考证号或姓名"
          clearable
          @clear="handleSearch"
          @input="handleSearch"
          style="width: 300px;"
        />
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </div>
  
      <!-- 表格 -->
      <el-table
        ref="scoreTable"
        :data="filteredData"
        style="width: 100%"
        height="750px"
        :default-sort="{ prop: 'totalScore', order: 'descending' }"
        highlight-current-row
      >
        <el-table-column type="index" label="序号" fixed="left" width="60" />
        <el-table-column prop="examNumber" label="准考证号" fixed="left" width="150" />
        <el-table-column prop="class" label="班级" fixed="left" width="100" />
        <el-table-column prop="name" label="姓名" fixed="left" width="120" />
  
        <!-- 分数表格列 -->
        <el-table-column prop="subject" label="学科" width="120" />
        <el-table-column prop="fullScore" label="满分" width="120" />
        <el-table-column prop="highestScore" label="最高分" width="120" />
        <el-table-column prop="lowestScore" label="最低分" width="120" />
        <el-table-column prop="averageScore" label="平均分" width="120" />
        <el-table-column prop="classRank" label="班级排名" width="120" />
        <el-table-column prop="excellentRate" label="优秀率" width="120" />
        <el-table-column prop="goodRate" label="良好率" width="120" />
        <el-table-column prop="passRate" label="合格率" width="120" />
        <el-table-column prop="lowScoreRate" label="低分率" width="120" />
        <el-table-column prop="exceedAverageRate" label="超均率" width="120" />
        <el-table-column prop="standardDeviation" label="标准差" width="120" />
      </el-table>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, reactive, computed } from 'vue';
  
  const classes = ['大一1班', '大一2班'];
  
  const selectedClass = ref(classes[0]);
  const searchQuery = ref('');
  
  const tableData = ref([
    // 在这里填入你的数据
    {
      examNumber: '20230001',
      class: '高三1班',
      name: '李明',
      subject: '语文',
      fullScore: 150,
      highestScore: 135,
      lowestScore: 90,
      averageScore: 120,
      classRank: 1,
      excellentRate: '15%',
      goodRate: '30%',
      passRate: '80%',
      lowScoreRate: '5%',
      exceedAverageRate: '10%',
      standardDeviation: 10,
    },
    // 更多数据...
  ]);
  
  const filteredData = computed(() => {
    return tableData.value.filter((item) => {
      const matchesClass = item.class === selectedClass.value;
      const matchesSearch =
        item.examNumber.includes(searchQuery.value) ||
        item.name.includes(searchQuery.value);
      return matchesClass && matchesSearch;
    });
  });
  
  const selectClass = (className: string) => {
    selectedClass.value = className;
  };
  
  const handleSearch = () => {
    // 搜索逻辑已经在filteredData中处理
  };
  </script>
  
  <style scoped>
  </style>
  